import { t } from 'i18next'
import React, { FC } from 'react'
import { Button, Search } from '@kedacom/react-next'
import { RowRendererProps } from './translator'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { VariableSizeList as List } from 'react-window'
import { ListItem } from './ListItem'
import { Wrap, Label, StyledPollSelectItem, BtnWrap, StyledPlanModal, StyledRollListTop, StyledRollList } from './style'
import { useData, useHeight } from './hooks'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Modal, Select, Input } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useRollCallStore } from './store'
import { revert_mt } from '@/api/manager/mt'
import { ListItemGhost, RightWrap } from '../../components'
import { ListEmpty, ListTop, ListTopActionItem } from '@/components/List'
import { ListBody } from './RightWrap/ListBody'
import { getCheckPreNameRule } from '@/utils'
import { useGlobalStore } from '@/store/global'

const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: revert_mt(rowData.mcc),
				remark: rowData.remark,
			},
			from: 'roll',
		}
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
const Roll: FC = () => {
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	const { handleDrop, changePlan, handleReturnBack, savePlan, addPlan, disabled, deletePlan } = useData()
	const {
		changeMode,
		list,
		state,
		planOptions,
		planValue,
		modeOptions,
		modeValue,
		callerOptions,
		callerValue,
		inputKeyUp,
		isSavePlanOpen,
		name,
		update,
		callPre,
		roll_call_sign_enable_disabled,
		disabledUp,
		disabledDown,
		openShow,
		delCalleeListBtnClick,
		remark,
		changeSet,
		disabledCallNext,
		disabledCallPre,
		clearCalleeListBtnClick,
		showSignResult,
		stopRollClick,
		disabledModeSelect,
		searchInputKeyup,
		addMt,
		startBtnClick,
		changeCaller,
		rcShow,
		callNext,
		callerPanelToggle,
	} = useRollCallStore(
		(state) => ({
			list: state.list,
			update: state.update,
			state: state.state,
			modeOptions: state.modeOptions,
			modeValue: state.modeValue,
			callerOptions: state.callerOptions,
			callerValue: state.callerValue,
			planOptions: state.planOptions,
			preName: state.preName,
			planValue: state.planValue,
			inputKeyUp: state.inputKeyUp,
			roll_call_sign_enable_disabled: state.roll_call_sign_enable_disabled,
			isSavePlanOpen: state.isSavePlanOpen,
			name: state.name,
			calleeList: state.calleeList,
			disabledDown: state.disabledDown,
			disabledUp: state.disabledUp,
			openShow: state.openShow,
			delCalleeListBtnClick: state.delCalleeListBtnClick,
			remark: state.remark,
			callPre: state.callPre,
			disabledCallPre: state.disabledCallPre,
			disabledCallNext: state.disabledCallNext,
			disabledModeSelect: state.disabledModeSelect,
			clearCalleeListBtnClick: state.clearCalleeListBtnClick,
			showSignResult: state.showSignResult,
			stopRollClick: state.stopRollClick,
			changeMode: state.changeMode,
			searchInputKeyup: state.searchInputKeyup,
			addMt: state.addMt,
			changeSet: state.changeSet,
			startBtnClick: state.startBtnClick,
			changeCaller: state.changeCaller,
			rcShow: state.rcShow,
			callNext: state.callNext,
			callerPanelToggle: state.callerPanelToggle,
		}),
		shallow
	)
	const optionBtn = () => {
		return (
			<BtnWrap>
				{state === 1 ? (
					<Button onClick={stopRollClick} style={{ margin: '0 0 0 10px' }}>
						{t('停止点名')}
					</Button>
				) : (
					<Button onClick={startBtnClick} style={{ margin: '0 0 0 10px' }}>
						{t('开始点名')}
					</Button>
				)}
			</BtnWrap>
		)
	}
	const topActions: ListTopActionItem[] = [
		{ text: t('备注'), onClick: remark },
		{
			text: t('删除'),
			onClick: () => {
				delCalleeListBtnClick()
			},
		},
		{
			text: t('清空'),
			onClick: () => {
				inputKeyUp === '' && clearCalleeListBtnClick()
			},
			disabled: inputKeyUp !== '',
		},
	]
	const listHeight = useHeight(list)
	return (
		<>
			<RightWrap title={t('点名轮询')} onBack={handleReturnBack} action={optionBtn()}>
				<Wrap>
					<Label title={t('模式选择')}>{t('模式选择')}</Label>
					<Select
						width={206}
						options={modeOptions}
						value={modeValue}
						disabled={disabledModeSelect}
						onChange={(e, v) => changeMode(v)}
					/>
				</Wrap>
				<Wrap>
					<Label>{t('点名人')}</Label>
					<Select
						width={206}
						options={callerOptions}
						value={callerValue}
						labelField="name"
						valueField="mtKey"
						onChange={(e, v, opt) => changeCaller(v, opt)}
						onPanelToggle={(flag) => {
							callerPanelToggle(flag)
						}}
					/>
				</Wrap>
				<Wrap>
					<Label>{t('轮询预案')}</Label>
					<Select
						width={103}
						options={planOptions}
						value={planValue}
						disabled={disabled}
						onClick={(e, v) => changePlan(v)}
						optionRender={(option, selected) => (
							<StyledPollSelectItem className={selected ? 'selected' : ''}>
								<span className="select-icon"></span>
								<span className="text" title={option.label}>
									{option.label}
								</span>
								{option.value !== '0' && (
									<span
										className="delete-icon"
										onClick={(e) => {
											e.stopPropagation()
											deletePlan(option as { label: string; value: string })
										}}
									>
										×
									</span>
								)}
							</StyledPollSelectItem>
						)}
					/>
					<Button onClick={savePlan} className="save-roll-coll-btn__i18n" style={{ margin: '0 0 0 10px' }}>
						{t('保存预案')}
					</Button>
				</Wrap>
				<StyledRollListTop className="roll-list-top">
					<ListTop title={t('被点名人列表')} num={list.length || 0} actions={topActions} />
				</StyledRollListTop>
				<StyledRollList>
					<ListBody
						order={(type) => {
							if (type === 'show') {
								rcShow()
							}
							if (type === 'roll-callee-up') {
								callPre()
							}
							if (type === 'roll-callee-next') {
								callNext()
							}
							if (type === 'top') {
								changeSet('top')
							}
							if (type === 'up') {
								changeSet('up')
							}
							if (type === 'down') {
								changeSet('down')
							}
							if (type === 'bottom') {
								changeSet('bottom')
							}
						}}
						disabledDown={disabledDown}
						disabledUp={disabledUp}
						disabledCallPre={disabledCallPre}
						disabledCallNext={disabledCallNext}
						disabled={!state}
						open={!openShow}
						_height={210}
					>
						<AutoSizer>
							{({ height }) => (
								<DragDropContextProvider>
									<Droppable onDrop={handleDrop} placeholderHeight={listHeight.height}>
										{(setDroppableRef) =>
											list.length > 0 ? (
												<List
													ref={listHeight.ref}
													width={234}
													height={height}
													itemCount={list.length}
													itemSize={(index) => listHeight.height[index]}
													itemData={list}
													outerRef={setDroppableRef}
													itemKey={(index, data) => data[index].mtKey}
												>
													{rowRenderer}
												</List>
											) : (
												<ListEmpty width={234} height={height} outerRef={setDroppableRef} />
											)
										}
									</Droppable>
								</DragDropContextProvider>
							)}
						</AutoSizer>
					</ListBody>
					<Wrap height={40}>
						<Search
							maxLength={128}
							width={243}
							className="wrap-right__search"
							iconAlign="left"
							onChange={(e, s) => {
								searchInputKeyup(s)
							}}
							value={inputKeyUp}
							placeholder={t('搜索被点名人')}
						/>
					</Wrap>
					<Wrap>
						<Button
							className="add-btn"
							width={140}
							onClick={() => {
								addMt()
							}}
						>
							{t('邀请终端')}
						</Button>
						<Button
							disabled={roll_call_sign_enable_disabled}
							width={140}
							onClick={() => {
								showSignResult()
							}}
						>
							{t('点名签到表')}
						</Button>
					</Wrap>
				</StyledRollList>
				<Modal
					open={isSavePlanOpen}
					title={t('保存预案')}
					width={400}
					height={300}
					okText={t('保存')}
					onOk={addPlan}
					onCancel={() => {
						update({ isSavePlanOpen: false })
					}}
					cancelText={t('取消')}
				>
					<StyledPlanModal>
						<div className="label">{t('预案名称')}</div>
						<Input
							width={250}
							placeholder={t('请输入预案名称')}
							focusMsg={t('预案名称最多可输入16个字符')}
							maxLength={16}
							rule={{
								required: {
									showIcon: false,
									msg: t('预案名称不能为空'),
								},
								regular: getCheckPreNameRule(SWITCH.characterLimit),
							}}
							value={name}
							onChange={(e, v) => update({ name: v })}
						/>
					</StyledPlanModal>
				</Modal>
			</RightWrap>
		</>
	)
}
export default Roll
